<template>
  <div class="menu">
    <a-list class="list">
      <a-list-item v-for="item in menuItem" :key="item" class="menuitem" @mouseover="showActions(item)" @mouseleave="hideActions">
        <div style="display: flex; align-items: center;">
          <icon-message />
          <a-list-item-meta :title="item">
          </a-list-item-meta>  
        </div>
        <template v-if="item === activeItem">
          <icon-edit class="edit-icon" @click="editItem(item)" />
          <icon-delete class="delete-icon" @click="deleteItem(item)" />
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const menuItem = ref<string[]>([
  '陪你唠嗑1',
  '发现生活2',
  '周游世界',
  '吃吃喝喝3',
  '一起长胖4',
  '陪你唠嗑5',
  '发现生活6',
  '周游世界7',
  '吃吃喝喝8',
  '一起长胖9',
  '陪你唠嗑10',
  '发现生活11',
  '周游世界12',
  '吃吃喝喝13',
  '一起长胖14',
  '周游世界15',
  '吃吃喝喝16',
  '一起长胖17',
  '陪你唠嗑18',
  '发现生活18',
  '周游世界20',
  '吃吃喝喝21',
  '一起长胖22',
])

const activeItem = ref<string | null>(null);

const editItem = (item:string) => {
  return item
  // console.log('编辑元素',item);
}

const deleteItem = (item:string) => {
  return item
  // console.log('删除元素',item);
}

const showActions = (item:string) => {
  activeItem.value = item;
}

const hideActions = () => {
  activeItem.value = null;
}
</script>

<style lang="less" >
.list {
  margin-top: 10px;
  
}
.menuitem {
  display: flex;
  position: relative;
  width: 260px;
  margin-right: 10px;
  border-radius: 15px;
  background-color: #EFECF6;
  .item.content {
    display: flex;
    align-items: center;
  }
}
.menuitem:hover{
  background-color: #fff; 
  cursor: pointer;
}

.arco-list-item-meta-title {
  padding-left: 4px;
}

.edit-icon,
.delete-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
}
.edit-icon {
  right: 35px; /* 调整编辑图标的位置 */
}
.delete-icon {
  right: 10px; /* 调整删除图标的位置 */
}
.edit-icon:hover,.delete-icon:hover{
  color: blue;
}
</style>
